import React from 'react'
import {Modal,Form, Input, Button, Upload,message} from 'antd'
import{UserOutlined,MailOutlined,SafetyOutlined,PhoneOutlined } from '@ant-design/icons';
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import { addUserActionAsync } from '../../../redux/action/userAction';
function AddUser(props) {
  const handleChangeAvatar=(e)=>{
    if(e.file.response)
    {
      return e.file.response.img
    }
    return '';
  }
  const handleSubmit=async ()=>{
    try{
      const fieldsValue = await userAddForm.validateFields()
      fieldsValue.key=Date.now()+''
      fieldsValue.avatar=process.env.REACT_APP_BASEURL+fieldsValue.avatar
      props.addUserActionAsync(fieldsValue)
      userAddForm.resetFields()
      props.close()
      message.success('添加成功!')
    }
    catch{
      message.error('添加失败!')
    }
  }
  const [userAddForm]=Form.useForm()
  return (
    <Modal
      title="添加用户信息"
      okText='添加'
      cancelText='取消'
      visible={props.visible}
      onCancel={()=>{
        userAddForm.resetFields()
        props.close()
        }}
      onOk={handleSubmit}
    >
      <Form
        layout="horizontal"
        form={userAddForm}
        name="userAddForm"
      >
        <Form.Item
          label="头像"
          name="avatar"
          valuePropName="file"
          getValueFromEvent={handleChangeAvatar}
          rules={[
            {
              required: true,
              message: '请上传图片!',
            },
          ]}
        >
          <Upload
            accept="image/*"
            action="/api/upload"
            listType="picture"
          >
            <Button>上传头像</Button>
          </Upload>
        </Form.Item>
        <Form.Item
          name="username"
          label="电话"
          rules={[
            {
              pattern:/^\d{11}$/,
              message: '请输入11个数字!',
            },
            {
              required: true,
              message: '请输入电话!',
            },
          ]}
        >
          <Input prefix={<PhoneOutlined />} placeholder='电话' />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[
            {
              pattern:/\w{6,20}/gi,
              message: '请输入6-20个字符！',
            },
            {
              required: true,
              message: '请输入密码',
            },
          ]}
        >
          <Input.Password prefix={<SafetyOutlined />} placeholder='密码' />
        </Form.Item>
        <Form.Item
          name="email"
          label="邮箱"
          rules={[
            {
              type:'email',
              message: '请输入正确的邮箱格式!',
            },
            {
              required: true,
              message: '请输入邮箱',
            },
          ]}
        >
          <Input prefix={<MailOutlined />} placeholder='邮箱' />
        </Form.Item>
        <Form.Item
          name="name"
          label="姓名"
          rules={[
            {
              min:2,
              message: '请输入大于等于2个字符！',
            },
            {
              required: true,
              message: '请输入姓名',
            },
          ]}
        >
          <Input prefix={<UserOutlined />} placeholder='姓名' />
        </Form.Item>
      </Form>
    </Modal>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    userList:state.userList
	}),
	{addUserActionAsync}
)(AddUser)
